<template>
    <div>
        <music-list :songs="songs" :title="title" :pic="pic"></music-list>
    </div>
</template>

<script>
import { GetSingerDetail } from "@/service/singer";
import { ProcessSongs } from "@/service/songs";
import MusicList from "@/components/musicList";
import storage from 'good-storage'
import {SINGER_KEY} from "@/assets/js/constant";

export default {
    name: 'singerDetail',
    components: {MusicList,},

    data(){
        return{
            songs: [],
            title: '',
            pic: '',
            mid: ''
        }
    },
    computed:{
        computedSinger(){
            let ret = null
            const cachedSinger = storage.session.get(SINGER_KEY)
            ret = cachedSinger
            return ret
        },

    },
    async created() {
        console.log(this.computedSinger)
        if(this.$route.params.mid){
            this.mid = this.$route.params.mid
        }else{
            this.mid = this.computedSinger.mid
        }
        if(this.$route.params.title){
            this.title = this.$route.params.title
        }else{
            this.title = this.computedSinger.name
        }
        if(this.$route.params.pic){
            this.pic = this.$route.params.pic
        }else{
            this.pic = this.computedSinger.pic
        }

        const result = await GetSingerDetail(this.mid)
        const songs = await ProcessSongs(result.songs)
        this.songs = songs
        //console.log(result)
        //console.log(songs)
    }
}
</script>

<style scoped>

</style>
